html, body, #app, #layout {
  width: 100%;
  height: 100%;
}
body {
  overflow: hidden;
}
#app {
  font-family: 'Microsoft YaHei';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-size: 14px;
  color: #444444;
}

.vc-layout(@min-width: 1280px,
           @min-height: 1024px,
           @nav-min-width: 1024px,
           @nav-height: 50px,
           @nav-font-title: 22px 'Microsoft YaHei',
           @icon-size: 20px,
           @side-width: 200px,
           @side-width-collapse: 60px,
           @side-height-submenu: 52px,
           @side-height-menu: 44px,
           @tab-height: 36px) {

  // 顶部栏
  .vc-nav-container {
    position: fixed !important;
    top: 0;
    z-index: 10;
    overflow: hidden;
    &:not(.vc-LR-nav) {
      width: 100%;
      min-width: @nav-min-width;
      height: @nav-height !important;
      left: 0;
      .vc-nav-left {
        padding-left: 20px;
        .vc-logo-cls;
        .vc-logo {
          max-width: calc(@side-width - 40px) !important;
          margin-right: 20px;
        }
      }
    }
    &.vc-LR-nav {
      width: calc(100% - @side-width);
      min-width: calc(@nav-min-width - @side-width);
      height: calc(@nav-height - 1px) !important;
      left: @side-width;
      .vc-transition;
      .vc-nav-left {
        padding-left: 18px;
      }
    }
    .vc-no-select;
    .vc-nav-left {
      .vc-title {
        display: inline-block;
        min-width: 10em;
        font: @nav-font-title;
        margin-bottom: 2px;
      }
    }
    .vc-nav-right {
      .vc-nav-user {
        display: flex;
        align-items: center;
        img {
          width: @icon-size;
          height: @icon-size;
          margin-right: 8px;
          border-radius: @icon-size / 2;
        }
        span {
          font-size: @icon-size - 6px;
        }
      }
      i {
        font-size: @icon-size;
      }
    }
  }

  // 主体区域
  .vc-layout-container {
    position: relative !important;
    &:not(.vc-LR-layout) {
      top: @nav-height;
      left: 0;
      width: 100%;
      height: calc(100% - @nav-height);
    }
    &.vc-LR-layout {
      top: 0;
      left: @side-width;
      width: calc(100% - @side-width);
      height: 100%;
      .vc-transition;
    }
  }

  // 侧边栏
  @media screen and (max-height: 720px) {
    .vc-side-container {
      background-size: @side-width auto;
    }
  }
  @media screen and (min-height: 720px) {
    .vc-side-container {
      background-size: auto 100%;
    }
  }
  .vc-side-container {
    position: fixed !important;
    left: 0;
    &:not(.vc-LR-side) {
      top: @nav-height;
      width: calc(@side-width - 1px);
      height: calc(100% - @nav-height);
      overflow-y: auto;
    }
    &.vc-LR-side {
      top: 0;
      width: @side-width;
      height: 100%;
      .vc-side-logo {
        height: calc(@nav-height - 1px);
        display: flex;
        justify-content: center;
        align-items: center;
        .vc-logo-cls;
      }
      .vc-side-menus {
        overflow-y: auto;
        height: calc(100% - @nav-height);
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .vc-transition;
    .vc-no-select;
    .el-menu--collapse {
      &, li {
        width: 100%;
      }
      &.el-menu > .el-menu-item, &.el-menu > .el-menu-item, &.el-menu > .el-submenu > .el-submenu__title, &.el-menu > .el-submenu > .el-submenu__title {
        padding: 0 0 0 5px !important;
        text-align: center !important;
      }
    }
  }
  .vc-side-container {
    @padding-left: 13px;
    & > .el-menu {
      & > .el-menu-item, .el-submenu__title {
        height: @side-height-submenu !important;
        line-height: @side-height-submenu !important;
      }
      .el-submenu .el-menu-item {
        height: @side-height-menu !important;
        line-height: @side-height-menu !important;
      }
      & > .el-menu-item, & > .el-submenu > .el-submenu__title {
        padding-left: @padding-left !important;
      }
      & > .el-menu {
        & > .el-menu-item, & > .el-submenu > .el-submenu__title {
          padding-left: @padding-left * 2 !important;
        }
        & > .el-menu {
          & > .el-menu-item, & > .el-submenu > .el-submenu__title {
            padding-left: @padding-left * 3 !important;
          }
        }
      }
    }
  }
  .el-menu--vertical {
    margin-left: 9px !important;
    .el-menu--popup-right-start {
      margin-left: 0;
      margin-right: 0;
    }
    & > .el-menu {
      & > .el-menu-item, .el-submenu__title, .el-submenu .el-menu-item {
        height: @side-height-menu !important;
        line-height: @side-height-menu !important;
      }
    }
  }
  
  // 标签页
  .vc-tab-container {
    position: relative !important;
    &:not(.vc-LR-tab) {
      top: 0;
      left: @side-width;
      width: calc(100% - @side-width);
      height: 100%;
    }
    &.vc-LR-tab {
      top: @nav-height;
      left: 0;
      width: 100%;
      height: calc(100% - @nav-height);
    }
    .vc-transition;
    & > .el-tabs {
      width: 100%;
      height: 100%;
      & > .el-tabs__header {
        margin-bottom: 0;
        z-index: 10;
        .vc-no-select;
        .el-tabs__nav > div {
          height: @tab-height;
        }
        .el-tabs__item {
          line-height: @tab-height - 4px;
          outline: none !important;
        }
        .el-tabs__nav-wrap.is-scrollable {
          padding: 0 @tab-height;
        }
        .el-tabs__nav-prev, .el-tabs__nav-next {
          width: @tab-height;
          line-height: @tab-height;
          text-align: center;
          i {
            font-weight: bold;
          }
        }
      }
      & > .el-tabs__content {
        width: 100%;
        height: calc(100% - @tab-height);
        padding: 0;
        overflow: auto;
        .vc-scrollBar;
        & > div:not(.el-tab-pane) {
          width: calc(100% - 30px);
          min-width: @min-width - @side-width - 30px;
          padding: 15px;
        }
      }
    }
    & > .el-tabs--border-card {
      border: none;
      box-shadow: 0;
    }
  }
  .vc-tab-icon-show {
    & > .el-tabs > .el-tabs__header {
      padding-left: @tab-height;
    }
  }
  .vc-tab-icon-spread {
    position: absolute;
    top: 0;
    left: 0;
    width: @tab-height;
    height: @tab-height;
    line-height: @tab-height;
    z-index: 11;
    .vc-transition;
  }

  // 折叠侧边栏
  .vc-sider-collapse {
    .vc-sider(@side-width-collapse);
    .vc-tab-icon-spread {
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
    }
  }
  .vc-sider (@side-width: @side-width) {
    // 侧边栏
    .vc-side-container {
      &:not(.vc-LR-side) {
        width: calc(@side-width - 1px) !important;
      }
      &.vc-LR-side {
        width: @side-width !important;
      }
    }
    // 标签页、左右布局-右
    .vc-tab-container:not(.vc-LR-tab), .vc-LR-layout, .vc-LR-nav {
      left: @side-width !important;
      width: calc(100% - @side-width) !important;
    }
  }

  // 顶部栏/侧边栏 - logo图标
  .vc-logo-cls () {
    .vc-logo {
      width: 100%;
      height: calc(100% - 12px);
    }
  }
}

// 滚动条
.vc-scrollBar (@width: 6px) {
  &:hover {
    overflow-y: auto !important;
  }
  &::-webkit-scrollbar {
    width: @width;
    height: @width;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: @width;
    background: rgba(0,0,0,0.2);
  }
  &::-webkit-scrollbar-track {
    border-radius: @width;
    background: rgba(0,0,0,0);
  }
}

// 过渡
.vc-transition (@time: 0.5s) {
  transition: all @time;
  -webkit-transition: all @time;
}

// 去除选中效果
.vc-no-select (@highlight-color: rgba(0, 0, 0, 0)) {
  -webkit-tap-highlight-color: @highlight-color;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
}

// 错误页面
.vc-error-page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  div {
    width: 100%;
    text-align: center;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}